<template>
	<view class="container">
		<!-- 布局：分为两列 -->
		<view class="main-content-frequency">
			<!-- 滑块和按钮区域 -->
			<view class="slider-container">
				<!-- 发球慢 标签 -->
				<text class="slider-label">发球快</text>

				<!-- 滑块轨道 -->
				<view class="slider-track-wrapper" @touchstart="onDragStart" @touchmove="onDragMove"
					@touchend="onDragEnd">
					<image class="slider-track" src="/static/bg.png" mode="widthFix" />

					<!-- 滑块按钮 -->
					<view class="slider-thumb" :style="{ top: sliderPosition + 'px' }">
						<!-- <image src="/static/points.png" mode="widthFix" /> -->
                        <image src="https://img.tennoir.ltd/static/new/%E7%BD%91%E7%90%83%E5%A4%87%E4%BB%BD@3x.png" mode="widthFix" />
                    </view>
				</view>

				<!-- 发球快 标签 -->
				<text class="slider-label">发球慢</text>
			</view>
		</view>

		<!-- start-column 放在右下角，并且按钮上下排列 -->
		<view class="start-column-frequency">
			<view class="start-column-header" @click="increaseFrequency">
				<!-- <image src="/static/plus-add.png"></image> -->
				<image src="https://img.tennoir.ltd/static/new/%E5%8A%A0.png"></image>
			</view>
			<view class="percentage">
				<text>{{ frequency }}</text>
			</view>
			<view class="start-column-header" @click="decreaseFrequency">
				<!-- <image src="/static/plus-sub.png"></image> -->
				<image src="https://img.tennoir.ltd/static/new/%E5%87%8F.png"></image>
			</view>
			<!-- <view @tap="startGame">
				<button class="start-button">{{ gameStatus === 0 ? '开始' : '结束' }}</button>
				<image src="/static/start.png"></image>
			</view> -->
			<view @tap="startGame" class="new-start-column">
				<image src="https://img.tennoir.ltd/static/new/%E7%BC%96%E7%BB%84%203@3x.png"></image>
				<view class="new-start-button">{{ gameStatus === 0 ? '开始' : '结束' }}</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				sliderPosition: 120, // 滑块初始位置 (像素)
				// frequency: 50, // 初始频率
				frequency: 53, // 初始频率
				maxPosition: 220, // 滑块的最大位置 (像素)
				minPosition: 20, // 滑块的最小位置 (像素)
				trackHeight: 200, // 轨道的高度
				trackImage: '/static/bg.png', // 滑块轨道图片路径
				thumbImage: '/static/points.png', // 滑块按钮图片路径
				gameStatus: 0, // 游戏状态，0 表示停止，1 表示开始
			};
		},
		watch: {
			// 监听 frequency 值的变化
			frequency(newValue) {
				this.saveFrequencyToLocal(newValue); // 存储到本地
			},
		},
		onLoad() {
			this.loadFrequencyFromLocal(); // 页面加载时读取本地存储
		},
		methods: {
			startGame() {
				let ctrlMachine = uni.getStorageSync("ctrlMachine");
				// 根据当前游戏状态来切换开始和结束
				if (this.gameStatus === 0) {
				  this.gameStatus = 1;  // 设置为已开始
				  ctrlMachine.gameStatus = 1; // 更新 ctrlMachine 中的状态
				  uni.setStorageSync("ctrlMachine", ctrlMachine); // 保存到本地存储
				} else {
				  this.gameStatus = 0;  // 设置为已结束
				  ctrlMachine.gameStatus = 0; // 更新 ctrlMachine 中的状态
				  uni.setStorageSync("ctrlMachine", ctrlMachine); // 保存到本地存储
				}
				// 开始游戏的逻辑
				let frequencyData = uni.getStorageSync("ctrlMachine");
				if (frequencyData || !frequencyData.frequency) {
					frequencyData.frequency = this.frequency;
					uni.setStorageSync("ctrlMachine", frequencyData);
				}

				console.log('频率设置请求数据：', frequencyData);
				this.$api.post({
					url: '/common/startFrequencyMode',
					loadingTip: '正在设置频率...',
					data: {
						frequencyData,
					},
					success: (res) => {
					  if (this.gameStatus === 1) {
					    uni.showToast({
					      title: '已开始',
					      icon: 'success',
					    });
					  } else {
					    uni.showToast({
					      title: '已结束',
					      icon: 'success',
					    });
					  }
					},
				});
				// console.log(ctrlMachine)
				// 开始游戏的逻辑
				// this.$api.post({
				// 	url: '/common/ctrlMachine',
				// 	loadingTip: '加载中...',
				// 	data: {
				// 		ctrlMachine
				// 	},
				// 	success: res => {
				// 		console.log(res)
				// 	}
				// });
			},
			// 将频率值存储到本地
			saveFrequencyToLocal(value) {
				let existingData = uni.getStorageSync('ctrlMachine') || {};
				existingData.frequency = this.frequency
				uni.setStorageSync('ctrlMachine', existingData);
			},

			// 从本地读取频率值
			loadFrequencyFromLocal() {
				const storedFrequency = uni.getStorageSync('frequency');
				if (storedFrequency !== '' && storedFrequency !== undefined) {
					this.frequency = parseInt(storedFrequency, 10); // 确保读取的是数字
					this.updateSliderPosition(); // 同步滑块位置
				}
			},
			// 增加频率
			increaseFrequency() {
				// if (this.frequency < 100) { // 确保频率不超过 100%
				// 	this.frequency += 5; // 每次增加 5
				// }
				if (this.frequency < 88) {
					this.frequency += 2;
					if (this.frequency > 88) {
						this.frequency = 88;
					}
				}
				this.updateSliderPosition(); // 同步滑块位置
			},

			// 减少频率
			decreaseFrequency() {
				// if (this.frequency > 0) { // 确保频率不低于 0%
				// 	this.frequency -= 5; // 每次减少 5
				// }
				if (this.frequency > 18) {
					this.frequency -= 2;
					if (this.frequency < 18) {
						this.frequency = 18;
					}
				}
				this.updateSliderPosition(); // 同步滑块位置
			},

			// 更新滑块位置以匹配频率值
			updateSliderPosition() {
				const range = this.maxPosition - this.minPosition; // 滑块轨道的范围
				// this.sliderPosition = (this.frequency / 100) * range + this.minPosition; // 根据频率计算位置
				this.sliderPosition = ((this.frequency - 18) / 70) * range + this.minPosition; // 根据频率计算位置
			},

			// 根据滑块的位置计算频率值
			calculateFrequency(position) {
				const range = this.maxPosition - this.minPosition; // 滑块轨道的高度
				// const frequency = ((position - this.minPosition) / range) * 100; // 频率范围 [0, 100]
				const frequency = ((position - this.minPosition) / range) * 70 + 18; // 频率范围 [18, 88]
				return Math.round(frequency);
			},

			// 拖动开始时的操作
			onDragStart(e) {
				this.startY = e.touches[0].clientY;
				e.preventDefault();
			},

			// 拖动过程中的操作
			onDragMove(e) {
				const moveY = e.touches[0].clientY - this.startY; // 计算移动的距离
				let newPosition = this.sliderPosition + moveY; // 新的滑块位置

				// 限制滑块位置在轨道范围内
				if (newPosition < this.minPosition) newPosition = this.minPosition;
				if (newPosition > this.maxPosition) newPosition = this.maxPosition;

				// 更新滑块位置
				this.sliderPosition = newPosition;
				this.startY = e.touches[0].clientY; // 更新触摸位置

				// 更新频率值
				this.frequency = this.calculateFrequency(this.sliderPosition);
			},

			// 拖动结束后的操作
			onDragEnd() {
				// 可以在此处添加更多操作，例如保存位置等
			}
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		// background-color: #000;
		background-color: #f5f5f5;
		color: #fff;
		height: 100vh;
		/* 固定页面高度为屏幕的高度 */
		overflow-y: hidden;
		/* 禁止垂直滚动 */
		width: 100%;
	}

	.new-start-column {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		bottom: -220rpx;
		right: 200rpx;
		image {
			width: 166rpx;
			height: 166rpx;
		}
		.new-start-button {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
			line-height: 44rpx;
			text-align: left;
			font-style: normal;
			margin-top: 8rpx;
		}
	}

	.slider-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		position: relative;
	}

	.slider-track-wrapper {
		position: relative;
		width: 134rpx;
		/* 轨道的宽度 */
		height: 523rpx;
		/* 轨道的高度 */
		cursor: pointer;
		/* 增加拖动感 */
	}

	.slider-track {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.slider-thumb {
		position: absolute;
		width: 44rpx;
		height: 44rpx;
		transform: translateX(-50%);
		left: 50%;
		cursor: pointer;
		/* 增加拖动感 */
	}

	.slider-label {
		font-size: 16px;
		// color: white;
		z-index: 10;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		text-align: right;
		font-style: normal;
		/* 确保标签在其他元素上面 */
	}

	.main-content-frequency {
		display: flex;
		justify-content: space-between;
		width: 350px;
		margin: 121rpx 0 99rpx 61rpx;
	}

	.start-column-frequency {
		position: absolute;
		// bottom: 0;
		bottom: 280rpx;
		/* 离底部 20px */
		right: 61rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.start-column-header {
		display: flex;
		justify-content: center;
		align-items: center;
		// width: 100%;
		// height: 180rpx;
		width: 96rpx;
		height: 96rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 40rpx 0rpx rgba(0,0,0,0.04);
		border-radius: 20rpx;

		image {
			// height: 106rpx;
			// width: 106rpx;
			width: 52rpx;
			height: 52rpx;
		}
	}

	.percentage {
		margin: 10px;
		// font-size: 24px;
		width: 96rpx;
		height: 96rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 40rpx 0rpx rgba(0,0,0,0.04);
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 40rpx;
			color: #FF5937;
			line-height: 56rpx;
			font-style: normal;
		}
	}

	.start-button {
		width: 100%;
		border-radius: 10px;
		background-color: transparent;
		color: #FFFFFF;
		font-size: 36rpx;
		text-align: center;
		border: none;
		transition: all 0.3s ease;
	}

	.start-button:hover {
		cursor: pointer;
	}

	.start-button:focus {
		outline: none;
	}

	image {
		width: 182rpx;
		height: 182rpx;
	}
</style>
